/**
 * 高阶组件（高阶函数）=》接收被增强组件（手机）=》返回一个新组件（套上手机壳的手机）
 * 创建步骤：
 * 1. 创建一个函数，名称约定以 with 开头 
2. 指定函数参数，参数应该以大写字母开头（作为要渲染的组件）
3. 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回 
4. 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
5. 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件,并将其渲染到页面中 
 */
import React, { Component } from 'react'
const withMouse = (WrappedComponent) => {
  return class extends Component {
    // 复用的状态逻辑
    // 设置响应数据
    state = {
      x: 0,
      y: 0,
    }

    // 鼠标移动的事件处理函数
    handlerMove = (e) => {
      // console.log(e)
      this.setState({
        x: e.x,
        y: e.y,
      })
    }

    componentDidMount() {
      window.addEventListener('mousemove', this.handlerMove)
    }

    componentWillUnmount() {
      window.removeEventListener('mousemove', this.handlerMove)
    }

    render() {
      console.log(this.props)
      return <WrappedComponent {...this.state} {...this.props} />
    }
  }
}

export default withMouse
